<template>
  <el-dialog
    :visible="value"
    :show-close="false"
    :width="width"
    :modal="modal"
    :top="top"
    :close-on-click-modal="closeOnclickModal"
    :custom-class="customClass"
    :destroy-on-close="true"
    append-to-body
    @close="close"
  >
    <template slot="title">
      <div class="dialog-header">
        <div class="dialog-header-left">
          {{ title }}
        </div>
        <div class="dialog-header-right" @click="close">关闭</div>
      </div>
    </template>
    <div class="dialog-content">
      <slot />
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: String,
    width: {
      type: String,
      default: '940'
    },
    value: {
      type: Boolean,
      default: true
    },
    modal: {
      type: Boolean,
      default: true
    },
    top: {
      type: String,
      default: '12vh'
    },
    closeOnclickModal: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    show() {
      console.log(true)
      this.$emit('input', true)
    },
    close() {
      this.$emit('input', false)
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-left: 5px solid #47e6de;
  background: linear-gradient(90deg, #43837f 0%, rgba(71, 230, 222, 0) 100%);
  align-items: center;

  &-left {
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 5px 5px 8px rgba(24, 200, 255, 0.51);
    padding-left: 8px;
    padding: 3px 0 3px 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &-right {
    width: 40px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #47e6de;
    cursor: pointer;
  }
}
.dialog-content {
  // max-height: 740px;
  overflow: auto;
  overflow-x: hidden;
}

::v-deep .el-dialog {
  --el-dialog-bg-color: linear-gradient(
    0deg,
    #032a3a 100%,
    rgba(71, 230, 222, 0) 0%
  ) !important;
  background: linear-gradient(
    180deg,
    #19323c 40%,
    rgb(42 41 41 / 60%) 100%
  ) !important;

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__headerbtn {
    top: -6px;

    .el-icon {
      color: rgba(17, 199, 188, 1);
    }
  }
}
</style>
